<template>
  <div class="tiaoxuan_right">
    <div
    class="car_div"
    v-for="(item, index) in list_r"
    :key="index"
    >
      <h1>{{ item.carName }} ({{item.vin}})</h1>
      <h1 v-show="isshow">{{ url }}</h1>

      <div class="ul_twice">

        <ul class="xuan_ul1">

          <li @click="go_detail(item)">
            <img :src="item.headPic" alt="" />
          </li>
          <li>{{item.seat}}座 | {{item.typeName}} | 建议乘坐{{item.seat}}人+1行李箱</li>

<!--            <van-icon name="good-job" /><van-tab title="XXX" v-if="item.price<200 ? true:false "></van-tab>-->


          <li><van-icon name="star"/>{{item.price<300 ? "优惠车辆":"豪车限定"}}</li>
        </ul>

        <ul class="xuan_ul2">
          <li>
            <span>{{ item.price }}</span>/<span>天起</span>
          </li>

          <li>
            <span>{{item.ctype==0 ? "满":item.ctype==1 ? "折":item.ctype==2 ? "惠":"无"}}</span>
            <span>{{item.ctype==0 ? "-":item.ctype==1 ? "":item.ctype==2 ? "-":""}}
              {{item.ctype==0 ? item.cdenominations:item.ctype==1 ? item.cdiscount:item.ctype==2 ? item.value:"无活动"}}
              {{item.ctype==0 ? "":item.ctype==1 ? "折":item.ctype==2 ? "":""}}

            </span>
          </li>
          <li>{{item.brandName}}系列</li>
        </ul>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
    },
  },
  beforeUpdate() {
  },

  mounted() {
  },
  data() {
    return {
      isshow: false,
      list_r: [],
    };
  },
  mounted() {
    this.carAll();
  },
  inject: ['reload'],
  methods: {
    //车辆展示
    carAll(){
      this.$nextTick(()=>{

      })
      setInterval(()=>{
        this.list_r=this.$root.list_r
      },200)
    },
    //选车
    go_detail(v) {
      let money = v.price;
      let stime = this.$store.state.startime_;
      let etime = this.$store.state.endtime_;
      let time = (etime - stime) / 24 / 60 / 60 / 1000;
      v.price = (money - 0) * time;
      this.$root.car=v
      this.$http.post("/car/order/insertOrder?startTime="+this.$store.state.starTime+"&endTime="+
              this.$store.state.endTime,v).then(res=>{
                console.log("=================================生成订单")
        this.$root.order=res.data.data
        console.log(this.$root.order)
      })
      this.$router.push({path:"/dingdanxiangqing"});
    }
  },
  components: {},
  destroyed() {
    this.list_r = [];
  },
};
</script>

<style scoped lang="less">
.tiaoxuan_right {
  width: 5.78rem;
  height: 12.28rem;
  .car_div {
    width: 100%;
    height: 4.18rem;
    background: white;
    border-radius: 0.08rem;
    padding-top: 0.3rem;
    margin-bottom: 0.15rem;
    h1 {
      font-size: 0.26rem;
      font-weight: 600;
      width: 100%;
      height: 0.5rem;
      padding-left: 0.49rem;
    }
    .ul_twice {
      width: 100%;
      height: 3.2rem;
      display: flex;
      .xuan_ul1 {
        flex: 3;
        li:nth-child(1) {
          width: 100%;
          img {
            width: 3.56rem;
            height: 1.79rem;
            margin-left: 0.24rem;
          }
        }
        li:nth-child(2) {
          width: 96%;
          font-size: 0.23rem;
          color: #8d8d8d;
          padding-left: 0.47rem;
          margin-top: 0.1rem;
        }
        li:nth-child(3) {
          width: 1.63rem;
          height: 0.37rem;
          margin: 0.24rem 0 0.2rem 0.47rem;
          border-radius: 0.06rem;
          background: linear-gradient(to right, #ffaa41 0%, #ff8927 100%);
          color: white;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          i {
            margin: 0 0.06rem;
          }
        }
      }
      .xuan_ul2 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 0.6rem;
        padding-right: 0.2rem;
        li:nth-child(1) {
          font-size: 0.26rem;
          span:first-child {
            font-size: 0.31rem;
            color: #f0230e;
            font-weight: 600;
          }
          span:last-child {
            font-size: 0.21rem;
            font-weight: 100;
          }
        }
        li:nth-child(2) {
          width: 0.97rem;
          height: 0.32rem;
          border: 0.02rem solid #f0230e;
          border-radius: 0.03rem;
          margin: 0.1rem;
          span:first-child {
            display: inline-block;
            width: 0.31rem;
            height: 0.32rem;
            font-size: 0.22rem;
            color: white;
            text-align: center;
            line-height: 0.3rem;
            background: #f0230e;
            position: relative;
            top: -0.04rem;
            left: -0.01rem;
          }
          span:last-child {
            width: 0.62rem;
            height: 100%;
            display: inline-block;
            font-size: 0.18rem;
            color: #f0230e;
            font-weight: 600;
            line-height: 0.32rem;
            position: relative;
            top: -0.04rem;
            left: -0.03rem;
            text-align: center;
          }
        }
        li:last-child {
          font-size: 0.2rem;
          color: #f0230e;
          background: #fff7f5;
          width: 1.23rem;
          height: 0.4rem;
          line-height: 0.4rem;
          display: flex;
          justify-content: space-evenly;
          i {
            font-size: 0.25rem;
            position: relative;
            top: 0.06rem;
          }
        }
      }
    }
  }
}
</style>
